import "./scene.css";

export function LinkScene({ title = "", link = "" }) {
    return (
        <div className="scene h-full w-full relative">
            <div className="absolute left-1/2 w-1/2 -translate-x-1/2 text-center">
                <h1 className="text-6xl mt-16 mb-16">{title}</h1>
                <div className="text-2xl text-center bg-white text-black p-4 rounded">
                    {link}
                </div>
            </div>
        </div>
    );
}

export function SubjectScene({ title = "", subTitle = "" }) {
    return (
        <div className="scene h-full w-full relative">
            <div className="absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2 text-center">
                <h1 className="text-[160px] mb-10" style={{ color: "#ffde00" }}>
                    {title}
                </h1>
                <h2
                    className={
                        subTitle.length < 6 ? "text-[140px]" : "text-[120px]"
                    }
                >
                    {subTitle}
                </h2>
            </div>
        </div>
    );
}

export function CodeScene({ title = "", children }) {
    return (
        <div className="scene h-full w-full relative">
            <div className="absolute left-1/2 w-3/4 -translate-x-1/2">
                <h1 className="text-6xl text-center mt-16 mb-16">{title}</h1>
                {children}
            </div>
        </div>
    );
}

export function BasicScene({ title = "", children }) {
    return (
        <div className="scene-basic h-full w-full relative">
            <div className="absolute left-1/2 w-3/4 -translate-x-1/2">
                <h1 className="text-6xl text-center mt-16">{title}</h1>
                {children}
            </div>
        </div>
    );
}

export default function Scene({ type, ...rest }) {
    if (type === "subject") {
        return <SubjectScene {...rest} />;
    } else if (type === "link") {
        return <LinkScene {...rest} />;
    } else if (type === "code") {
        return <CodeScene {...rest} />;
    }
    return <BasicScene {...rest} />;
}
